<html>
<title>组件</title>

<head>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="container">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>
    <script>
        // 全局组件
        Vue.component('my-hello', {
            template: '<h1>{{ name }}</h1>',
            //组件中传入的数据必须用data方法
            data: function () {
                return {
                    name: "jerry"
                }
            }
        });
        var vm = new Vue({
            data: {
                flag: false
            },
            //局部组件
            components: {
                'my-world': {
                    template: '<h3>{{ age }}</h3>',
                    //组件中传入的数据必须用data方法
                    data() {
                        return {
                            age: 18
                        }
                    }
                }
            }
        }).$mount('.container');
    </script>

</body>

</html>